<!doctype html >
<html xmlns:th="http://www.thymeleaf.org">

<head th:replace="components/head :: head"></head>

<body>
<style>
	.bd-placeholder-img {
		font-size: 1.125rem;
		text-anchor: middle;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

	@media (min-width: 768px) {
		.bd-placeholder-img-lg {
			font-size: 3.5rem;
		}
	}

	.container {
		max-width: 960px;
	}

	/*
	 * Custom translucent site header
	 */

	.site-header {
		background-color: rgba(0, 0, 0, .85);
		-webkit-backdrop-filter: saturate(180%) blur(20px);
		backdrop-filter: saturate(180%) blur(20px);
	}

	.site-header a {
		color: #999;
		transition: ease-in-out color .15s;
	}

	.site-header a:hover {
		color: #fff;
		text-decoration: none;
	}

	/*
	 * Extra utilities
	 */

	.flex-equal > * {
		-ms-flex: 1;
		flex: 1;
	}

	@media (min-width: 768px) {
		.flex-md-equal > * {
			-ms-flex: 1;
			flex: 1;
		}
	}

	.overflow-hidden {
		overflow: hidden;
	}
</style>

<nav th:replace="components/nav :: nav"></nav>

<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
	<div class="col-md-6 p-lg-5 mx-auto my-5">
		<h1 class="display-4 font-weight-normal">HCE分布式计算平台</h1>
		<p class="lead font-weight-normal">明月出天山，苍茫云海间。</p>
		<p class="lead font-weight-normal">长风几万里，吹度玉门关。</p>
		<a class="btn btn-outline-secondary" href="#">Coming soon</a>
	</div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
	<div class="bg-dark mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
		<div class="my-3 py-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
	<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
		<div class="my-3 p-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
	<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
		<div class="my-3 p-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-dark shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
	<div class="bg-primary mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center text-white overflow-hidden">
		<div class="my-3 py-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-light shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
	<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
		<div class="my-3 p-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
	<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
		<div class="my-3 py-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
</div>

<div class="d-md-flex flex-md-equal w-100 my-md-3 pl-md-3">
	<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
		<div class="my-3 p-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
	<div class="bg-light mr-md-3 pt-3 px-3 pt-md-5 px-md-5 text-center overflow-hidden">
		<div class="my-3 py-3">
			<h2 class="display-5">Another headline</h2>
			<p class="lead">And an even wittier subheading.</p>
		</div>
		<div class="bg-white shadow-sm mx-auto" style="width: 80%; height: 300px; border-radius: 21px 21px 0 0;"></div>
	</div>
</div>

<footer th:replace="components/footer :: footer"></footer>

<div th:replace="components/footer-lib"></div>

</body>
</html>
